<template>
  <div>
    <div>
      <div class="kuang">
        <p class="top_p">省份</p>
        <p class="bottom_p">{{provinceName}}</p>
      </div>
      <div class="kuang">
        <p class="top_p">已入驻代理商</p>
        <p class="bottom_p">{{count_partner}}</p>
      </div>
      <div class="kuang">
        <p class="top_p">合伙人直邀小店数量</p>
        <p class="bottom_p">{{count_invitation_shop}}</p>
      </div>
      <!-- <div class="kuang">
        <p class="top_p">合伙人直邀服务商数量</p>
        <p class="bottom_p">{{count_invitation_sp}}</p>
      </div> -->
    </div>

    <div class="shop">
      <el-button
        style="float:right;margin-top:20px;"
        size="mini"
        type="primary"
        @click="searchArea"
      >搜索</el-button>
      <el-input
        style="float:right;width:164px;margin-top:20px;"
        size="mini"
        placeholder="输入合伙人账号搜索"
        v-model="mobile"
      ></el-input>
      <el-select
        style="width:130px;float:right;margin-top:20px;margin-right:12px;"
        v-model="region_id"
        size="mini"
        filterable
        placeholder="区/县"
      >
        <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select
        style="width:130px;float:right;margin-top:20px;"
        v-model="city_id"
        size="mini"
        filterable
        placeholder="市"
        @change="onChangeCity"
      >
        <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>

      <span style="float:right;margin-top:24px;color:#666;margin-right:8px;">所属区域</span>
      <el-table
        :data="tableData"
        style="width:100%;margin:20px 0;"
        max-height="680"
        :cell-style="tc"
        :header-cell-style="tccolor"
      >
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="合伙人账号" prop="mobile"></el-table-column>
        <el-table-column label="管理区域" width="280">
          <template slot-scope="scope">
            {{scope.row.province}}.{{scope.row.city}}.{{scope.row.region}}
            <span
              style="cursor:pointer;color:#f4222d;"
              @click="watchAllAreas(scope.row.uid)"
            >(查看全部)</span>
          </template>
        </el-table-column>
        <el-table-column label="联系人"  prop="self_name">
          <template slot-scope="scope">
            <p v-if="scope.row.partner_type == 1">{{scope.row.company_contact}}</p>
            <p v-if="scope.row.partner_type == 2">{{scope.row.self_name}}</p>
            <p v-if="scope.row.partner_type == 0">待定</p>
          </template>
        </el-table-column>
        <el-table-column label="入驻时间" prop="create_at" ></el-table-column>
        <!-- <el-table-column label="直邀乐粉">
          <template slot-scope="scope">
            {{scope.row.fans_count}}
            <span
              style="cursor:pointer;color:#f4222d;"
              v-if="scope.row.fans_count != 0"
              @click="watchFans(scope.row.uid)"
            >(查看)</span>
          </template>
        </el-table-column>
        <el-table-column label="直邀小店">
          <template slot-scope="scope">
            {{scope.row.shop_count}}
            <span
              style="cursor:pointer;color:#f4222d;"
              v-if="scope.row.shop_count != 0"
              @click="watchShop(scope.row.uid)"
            >(查看)</span>
          </template>
        </el-table-column>
        <el-table-column label="直邀服务商" width="100">
          <template slot-scope="scope">
            {{scope.row.invitation_count}}
            <span
              style="cursor:pointer;color:#f4222d;"
              v-if="scope.row.invitation_count != 0"
              @click="watchInvitation(scope.row.uid)"
            >(查看)</span>
          </template>
        </el-table-column>-->
        <el-table-column label="合伙人状态" >
          <template slot-scope="scope">
            <p v-if="scope.row.status == 0" style="color:red">禁用</p>
            <p v-if="scope.row.status == 1" style="color:green">正常</p>
            <p v-if="scope.row.status == 2">审核中</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="480">
          <template slot-scope="scope">
            <el-button size="mini" @click="editAreaDetail(scope.row.id)">编辑</el-button>
            <el-button size="mini" @click="watchWhaleStore(scope.row.uid)">幕后街</el-button>
            <el-button size="mini" @click="watchServiceOrder(scope.row.uid)">服务订单</el-button>
            <el-button size="mini" @click="watchRedpacketRecord(scope.row.uid)">红包记录</el-button>
            <el-button size="mini" @click="watchSonAccount(scope.row.uid)">子账号</el-button>
            <el-button size="mini" @click="disableAreaPeopleJudge(scope.row.uid)">
              <span
                :style="scope.row.status == 0 ?'color:green':'color:red'"
              >{{scope.row.status == 0 ? '启用':'禁用'}}</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="page"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!--展示全部区域-->
    <jdialog :title="addTitle" :visible.sync="isShowAddRecharge" width="400px">
      <div>
        <div v-for="(item,index) in areaMangerList" :key="index" class="forAreas">
          <span>{{index+1}}</span>
          {{item.province}}-{{item.city}}-{{item.region}}
        </div>
      </div>
    </jdialog>
  </div>
</template>

<script>
// import {
//   provinceOrderCountId,
//   adminPartnerSearch,
//   partnerProvinceAreas,
//   updataStatusPartner
// } from "@/api/service.js";
// import { provinceCityArea } from "@/api/goods";
export default {
  created() {},
  mounted() {
    this.provinceId = this.$route.query.region_id;
    this.provinceName = this.$route.query.name;
    if (this.provinceId) {
      this.getprovinceOrderCountIdData();
      this.getProvinceDataList("2", this.provinceId);
      this.getpartnerProvinceSearchData();
    }
  },
  data() {
    return {
      showModal: false,
      provinceName: "",
      count_partner: 0,
      count_invitation_shop: 0,
      count_invitation_sp: 0,
      provinceId: "",
      city_id: "",
      region_id: "",
      mobile: "",
      tableData: [],
      total: 0,
      page: 1,
      size: 20,
      // 展示全部区域
      isShowAddRecharge: false,
      addTitle: "代理区域详情",
      areaMangerList: [],
      areaList: [],
      cityList: []
    };
  },
  methods: {
    pageChange(page) {
      this.page = page;
      this.getpartnerProvinceSearchData();
    },
    searchArea() {
      this.page = 1;
      this.getpartnerProvinceSearchData();
    },
    onChangeCity(id) {
      this.region_id = "";
      this.getProvinceDataList("3", id);
    },
    async getProvinceDataList(t, p) {
      let res = await provinceCityArea({ type: t, pid: p });

      if (res.code === 10000) {
        if (t === "1") {
          this.provinceList = res.data;
        } else if (t === "2") {
          this.cityList = res.data;
        } else {
          this.areaList = res.data;
        }
      }
    },
    async getprovinceOrderCountIdData() {
      let from = {
        province_id:this.provinceId
      }
      let res = await provinceOrderCountId(from);
      if (res.code === 10000) {
        this.count_partner = res.data.count_partner;
        this.count_invitation_shop = res.data.count_invitation_shop;
        this.count_invitation_sp = res.data.count_invitation_sp;
      }
    },
    //获取列表接口
    async getpartnerProvinceSearchData() {
      // var url = 'city_id='+this.city_id+
      //           '&region_id='+this.region_id+
      //           '&mobile='+this.mobile+
      //           '&page='+this.page
      // let res  = await partnerProvinceSearch(this.provinceId,url)
      var form = {
        province_id: this.provinceId,
        page: this.page,
        city_id:this.city_id,
        region_id:this.region_id,
        mobile:this.mobile
      };
      let res = await adminPartnerSearch(form);
      if (res.code === 10000) {
        this.tableData = res.data.data;
        this.total = res.data.total;
      } else {
        this.$message.error(res.message);
      }
    },
    //幕后街
    watchWhaleStore(id) {
      this.$router.push({
        // path: "./../management/shoplist",
        // query: { serviceId: id }
        name: "management_shoplist",
        params: { serviceId: id }
      });
    },
    //服务订单
    watchServiceOrder(id) {
      this.$router.push({
        path: "./isServiceOrder",
        query: { serviceId: id }
      });
    },

    //红包记录
    watchRedpacketRecord(id) {
      this.$router.push({
        path: "./ispRedPacket",
        query: { serviceId: id }
      });
    },
    watchFans(id) {
      this.$router.push({
        path: "./ispAreaDetailFanshopPar",
        query: {
          serviceId: id,
          type: "third"
        }
      });
    },
    // 查看全部管理区域
    async watchAllAreas(id) {
      let res = await partnerProvinceAreas(id);
      console.log(res);
      this.isShowAddRecharge = true;
      this.areaMangerList = res.data;
    },
    watchShop(id) {
      this.$router.push({
        path: "./ispAreaDetailFanshopPar",
        query: {
          serviceId: id,
          type: "first"
        }
      });
    },
    watchInvitation(id) {
      this.$router.push({
        path: "./ispAreaDetailFanshopPar",
        query: {
          serviceId: id,
          type: "second"
        }
      });
    },
    //编辑
    editAreaDetail(id) {
      this.$router.push({
        path: "./ispAreaPartnerEditdetail",
        query: {
          partner_id: id
        }
      });
    },
    //子账号
    watchSonAccount(id) {
      this.$router.push({
        path: "./ispAreaChildrenAccount",
        query: {
          uid: id
        }
      });
    },
    //禁用
    async disableAreaPeople(uid) {
      var data = {
        uid: uid
      };
      let res = await updataStatusPartner(data);
      if (res.code == 10000) {
        this.getpartnerProvinceSearchData();
      } else {
        this.$message.error(res.message);
      }
    },
    async disableAreaPeopleJudge(uid) {
      this.$confirm("确认禁用该合伙人吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.disableAreaPeople(uid);
        })
        .catch(() => {});
    },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 0 20px;
}
.kuang {
  margin-top: 5px;
  float: left;
  width: 33%;
  height: 72px;
  text-align: center;
  border: 1px solid #999;
  .top_p {
    color: #999;
    font-size: 13px;
    margin: 12px 0;
  }
  .bottom_p {
    color: #333;
    font-size: 17px;
  }
}

.pagination {
  float: right;
  margin: 20px 0;
}
.forAreas {
  border: 1px solid black;
  width: 90%;
  margin: 5px auto;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
.forAreas span {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-color: #000;
  display: inline-block;
  line-height: 20px;
  color: #fff;
}
</style>
